<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <!--  自定义标签页 -->
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :key="index"
        :label="tab.label"
      >
        <el-table :data="tab.inputs" border style="width: 100%;">
          <!-- Key 列 -->
          <el-table-column
            prop="key"
            label="Key"
            min-width="20%"
            align="center"
          />

          <!-- Value 列 -->
          <el-table-column prop="value" label="Value" min-width="60%" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="请输入内容"
              />
            </template>
          </el-table-column>

          <!-- Value 列 -->
          <el-table-column prop="value" label="Value" min-width="60%" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="请输入提示内容"
              />
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column label="操作" min-width="20%" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                class="action-button"
                @click="submit(scope.row.key, scope.row.value)"
              >提交
              </el-button>
              <el-button
                type="default"
                size="small"
                class="action-button"
                @click="cancel(scope.row.key)"
              >取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

// import {URL_PREFIX} from '@/api/config'

export default {
  // 后台参数配置管理
  name: 'Argument',
  props: {},
  data() {
    return {
      tabs: [] // 用于存储从后端获取的标签页数据
    }
  },
  created() {
  },
  mounted() {
    this.fetchTabData() // 组件挂载时请求数据
  },
  methods: {
    async fetchTabData() {
      // 模拟后端接口返回的数据
      const mockData = [
        {
          label: '我的行程',
          inputs: [
            { key: '行程1', value: '行程内容1' },
            { key: '行程2', value: '行程内容2' }
          ]
        },
        {
          label: '消息中心',
          inputs: [
            { key: '消息1', value: '消息内容1' },
            { key: '消息2', value: '消息内容2' }
          ]
        }
      ]
      // 将 mock 数据赋值给 tabs
      this.tabs = mockData
    },
    submit(key, value) {
      // 提交逻辑
      console.log(`提交了 ${key} 的值: ${value}`)
    },
    cancel(key) {
      // 取消逻辑
      console.log(`取消了 ${key}`)
      // 在这里可以添加取消逻辑，例如重置输入框的值等
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
</style>
